﻿
.animate-enter, 
.animate-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.animate-enter.animate-enter-active, 
.animate-leave {
    opacity: 1;
    top: 0;
    height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
    opacity: 0;
    top: -50px;
    height: 0px;
}

/*------------------------ Animation for repeat-------------------*/
.animateRepeat-enter,
.animateRepeat-leave {
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
}

    .animateRepeat-enter.animateRepeat-enter-active,
    .animateRepeat-leave {
        opacity: 1;
        top: 0;
        height: 30px;
    }

        .animateRepeat-leave.animateRepeat-leave-active,
        .animateRepeat-enter {
            opacity: 0;
            top: -50px;
            height: 0px;
        }

/*-------------  Animation for ng-view ---------------------------*/

.animationview.ng-enter,
.animationview.ng-leave {
    position: relative;
}

.animationview.ng-enter {
    -moz-transition: ease-out all 0.3s 0.4s;
    -o-transition: ease-out all 0.3s 0.4s;
    -webkit-transition: ease-out all 0.3s 0.4s;
    transition: ease-out all 0.3s 0.4s;
    left: 2em;
    opacity: 0;
}

    .animationview.ng-enter.ng-enter-active {
        left: 0;
        opacity: 1;
    }

.animationview.ng-leave {
    -moz-transition: 0.3s ease-out all;
    -o-transition: 0.3s ease-out all;
    -webkit-transition: 0.3s ease-out all;
    transition: 0.3s ease-out all;
    left: 0;
    opacity: 1;
}

    .animationview.ng-leave.ng-leave-active {
        left: 2em;
        opacity: 0;
    }

/*------------------- Animation form loading -------------------*/

.ngplus-overlay-background {
    top: 0px;
    left: 0px;
    padding-left: 100px;
    position: absolute;
    z-index: 10000;
    height: 100%;
    width: 100%;
    /*background-color: #808080;*/
    background-color: #FFFFFF;
    opacity: 0.2;
}

.ngplus-overlay-content {
    position: absolute;
    /*border: 1px solid #000;*/
    /*background-color: #fff;*/
    font-weight: bold;
    height: 100px;
    width: 300px;
    height: 15em;
    width: 20em;
    z-index: 10000;
    text-align: center;
}

/*Optional Animations*/
.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
    display: inline !important;
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

    .dissolve-animation.ng-hide-remove.ng-hide-remove-active,
    .dissolve-animation.ng-hide-add {
        opacity: 1;
    }

        .dissolve-animation.ng-hide-add.ng-hide-add-active,
        .dissolve-animation.ng-hide-remove {
            opacity: 0;
        }

/*.shuffle-animation.ng-enter,
.shuffle-animation.ng-leave {
    position: relative;
}

.shuffle-animation.ng-enter {
    -moz-transition: ease-out all 0.3s 0.4s;
    -o-transition: ease-out all 0.3s 0.4s;
    -webkit-transition: ease-out all 0.3s 0.4s;
    transition: ease-out all 0.3s 0.4s;
    left: 2em;
    opacity: 0;
}

.shuffle-animation.ng-enter.ng-enter-active {
    left: 0;
    opacity: 1;
}

.shuffle-animation.ng-leave {
    -moz-transition: 0.3s ease-out all;
    -o-transition: 0.3s ease-out all;
    -webkit-transition: 0.3s ease-out all;
    transition: 0.3s ease-out all;
    left: 0;
    opacity: 1;
}

.shuffle-animation.ng-leave.ng-leave-active {
    left: 2em;
    opacity: 0;
}*/
/*.animate-enter, 
.animate-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.animate-enter.animate-enter-active, 
.animate-leave {
    opacity: 1;
    top: 0;
    height: 30px;
}
 
.animate-leave.animate-leave-active,
.animate-enter {
    opacity: 0;
    top: -50px;
    height: 0px;
}*/

/*.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: rotateX(-180deg) translatez(30px);
    -moz-transform: rotateX(-180deg) translatez(30px);
    -ms-transform: rotateX(-180deg) translatez(30px);
    -o-transform: rotateX(-180deg) translatez(30px);
    transform: rotateX(-180deg) translatez(30px);
    opacity: 0;
    height: 0px;
}        
 
.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: rotateX(0deg) translatez(30px);
    -moz-transform: rotateX(0deg) translatez(30px);
    -ms-transform: rotateX(0deg) translatez(30px);
    -o-transform: rotateX(0deg) translatez(30px);
    transform: rotateX(0deg) translatez(30px);
    opacity: 1;
    height: 30px;
}*/

/*.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: rotateX(90deg) rotateZ(90deg);
    -moz-transform: rotateX(90deg) rotateZ(90deg);
    -ms-transform: rotateX(90deg) rotateZ(90deg);
    -o-transform: rotateX(90deg) rotateZ(90deg);
    transform: rotateX(90deg) rotateZ(90deg);
    opacity: 0;
    height: 0px;
}        
 
.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: rotateX(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateZ(0deg);
    opacity: 1;
    height: 30px;
}*/
